12-0 js、style
const App = {
data() {
return {
isTransform: true,
boxColor: false,
objectClass: {
rotate: true,
'bg-danger': true
},
// Array 操作
arrayClass: [''],
// 行內樣式
// 使用駝峰式命名
styleObject: {
backgroundColor: 'red',
borderWidth: '5px'
},
styleObject2: {
boxShadow: '3px 3px 5px rgba(0, 0, 0, 0.16)'
},
styleObject3: {
userSelect: 'none'
}
};
},
methods: {
change: function (key) {
this[key] = !this[key];
},
addClass(arr) {
this.arrayClass.push(...arr);
}
},
};
Vue.createApp(App).mount('#app');
<style>
.box {
background-color: var(--bs-light);
border: 1px solid var(--bs-gray);
width: 80px;
height: 80px;
}
.box {
transition: all .5s;
}
.box.rotate {
transform: rotate(45deg)
}
</style>
12-1 樣式切換:物件寫法
<!-- key值對應className,物件的值對應判斷式(true) -->
<!-- 當要綁定樣式時,而樣式有'-'時會需要轉為字串用''保裹起來 -->
<div class="box" :class="{ rotate:isTransform ,'bg-danger' :boxColor }"></div>
<hr>
<button class="btn btn-outline-primary" v-on:click="change('isTransform')">選轉物件</button>
<button class="btn btn-outline-primary ms-1" v-on:click="change('boxColor')">切換色彩</button>
12-2 帶入js裡資料的物件objectClass寫法
<div class="box" :class="objectClass"></div>
12-3 陣列寫法
<button class="btn" :class="['btn-secondary','disabled']">請操作本元件</button>
<!-- 將多個class用陣列方式呈現樣式 -->
<button class="btn" :class="arrayClass">請操作本元件</button>
<!-- 點選滑鼠事件addclass傳入觸發addclass方法,將收到樣式資料傳入arryclass陣列,當有綁定arryclass陣列按鈕將觸發所新增樣式 -->
<button type="button" class="btn btn-outline-primary" v-on:click="addClass(['btn-primary', 'disabled'])">為陣列加入Class</button>
12-4 綁定行內樣式
<!-- 物件key值帶入Style屬性,屬性若有中間'-'時須改為小駝峰寫法 -->
<!-- 值則是帶入相對應的值 -->
<div class="box" :style="{backgroundColor:'red' }"></div>
<div class="box" :style="styleObject"></div>
<div class="box" :style="[styleObject,styleObject2,styleObject3]"></div>
知識點來源:六角課程
以上是今天所提供知識點如有誤,再請務必在下面留言~